<template>
  <el-dialog
    v-dialogDrag
    title="用户分配"
    :visible.sync="roleShow"
    width="60%"
    length="100%"
    :before-close="close"
  >
    <el-table
      ref="roleTable"
      v-loading="loading"
      :data="roleData"
      selectable
      highlight-current-row
      max-height="350"
      style="width: 100%"
      @select="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="角色名" align="center" prop="name" />
      <el-table-column label="角色代码" align="center" prop="code" />
      <el-table-column label="备注" align="center" prop="remarke" />
    </el-table>
    <!-- 分页条-->
    <el-pagination
      :v-model="rolePage"
      :current-page.sync="rolePage.pageNum"
      :page-size="rolePage.pageSize"
      :page-sizes="rolePage.pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rolePage.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <span slot="footer">
      <el-button
        style="margin-left: 30px"
        @click="close"
      >取 消</el-button>
      <el-button type="primary" @click="roleAdd">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { commonQuery } from '../../../api/right/role'
import { modifyWithNewRole } from '@/api/right/user'
export default {
  name: 'RoleDialog',
  props: {
    selections: Array, // 已选择数据
    roleTitle: String, // 弹窗标题
    roleShow: Boolean, // 是否显示
    roleClose: Function, // 关闭函数
    roleClick: Function // 确认函数
  },
  data() {
    return {
      loading: true, // 加载中
      roleData: [], // 用户数据
      roleQuery: {}, // 查询传参
      multipleSelection: [], // 选择器
      roleIdList: [], // 角色id
      userIdList: [], // 用户id
      roleList: {},
      rolePage: { // 用户表页码
        total: null,
        pageNum: 1, // 页号
        pageSize: 5, // 页大小
        pageSizes: [5, 10, 15, 30, 100], // 页大小选择
        pages: null
      }
    }
  },
  methods: {
    // 初始化
    onShow() {
      const userVo = this.selections
      for (let i = 0; i < userVo.length; i++) {
        this.roleIdList.push(userVo[i].id)
      }
      this.getRole(this.rolePage.pageNum)
    },
    // 获取角色数据
    getRole(pageNum) {
      this.loading = true
      this.roleQuery.total = this.rolePage.total
      this.roleQuery.pageNum = pageNum
      this.roleQuery.pageSize = this.rolePage.pageSize
      console.log(this.roleQuery)
      commonQuery(this.roleQuery)
        .then((response) => {
          const { total, pages } = response // 如果异常则被axios 的拦截器拦截并且显示错误码和消息
          this.rolePage.total = parseInt(total)
          this.rolePage.pages = parseInt(pages)
          this.roleData = response.data
          console.log(this.roleData)
          this.loading = false
        })
        .catch(() => {
          console.log('网络错误，请检查网络')
          this.loading = false
        })
    },
    // 更改页大小
    handleSizeChange(val) {
      this.rolePage.pageSize = val
      this.getRole(this.rolePage.pageNum)
    },
    // 跳转页码
    handleCurrentChange(val) {
      this.getRole(val)
      console.log(this.multipleSelection)
    },
    // 选择用户
    handleSelectionChange(val, row) {
      this.multipleSelection.push(row)
    },
    // 分配角色
    roleAdd() {
      const userVo = this.selections
      this.$confirm('分配角色将覆盖已有角色，请慎重操作').then(response => {
        for (let index = 0; index < userVo.length; index++) {
          userVo[index].roleList = null
          userVo[index].roleList = this.multipleSelection
        }
        modifyWithNewRole(userVo)
          .then(response => {
            if (response) {
              this.$message.success('分配成功')
              this.roleClick()
            } else {
              this.$message.error('请选择分配角色')
              this.roleClick()
            }
          })
          .catch(() => {
            this.$message.error('网络错误')
            this.roleClick()
          })
      })
    },
    // 关闭、取消函数
    close() {
      this.multipleSelection = []
      this.roleClose()
    }
  }
}
</script>

